<template>
	<view class="box">
		<view class="tab_nav">
			<nav-bar
				nav_btn="back"
				:index="index"
				:title="title"
				@onPicker="onPicker"
				:showPicker="showPicker"
				:color="color"
				:placeholder="placeholder"
				:list="shopList"
				:auto_img="image"
				:background="background"
			></nav-bar>
		</view>
		<view class="header_share w750 flex">
			<input class="uni_ipt" type="text" value="" placeholder-style="color: #CCCCCC;" placeholder-class="s24 f500 family" placeholder="输入下单人/手机号" v-model="keyword" />
			<image class="search_img" src="/static/search.png"></image>
			<view class="search_btn s26 f500 family txtali" @click="getData">搜索</view>
		</view>
		<view class="head_riqi_box w750 flex">
			<uni-datetime-picker type="date" :value="startDate" start="2021-3-20" end="2111-6-30" @change="change" />
			<view class="zhi_txt s26 family f500">至</view>
			<uni-datetime-picker type="date" :value="endDate" start="2021-3-20" end="2111-6-30" @change="change1" />
			<view class="shaixuan_btn s24 family f500 txtali" @click="screen">筛选</view>
		</view>
		<view class="select_box flex">
			<view class="left_box flex" v-for="(item, index) in listTj" :key="index" @click="active(index)">
				<view :class="[listTjIndex == index ? 'tjl_icon_active' : 'tjl_icon']"></view>
				<view :class="[listTjIndex == index ? 'tjl_txt_active' : 'tjl_txt', 'family', 'f500', 's24']">
					{{ item.name }}
				</view>
			</view>
			<view class="right_box flex">
				<view
					:class="[selectIndex == index ? 'list_box' : 'list_box_active', 'family', 'f500', 's22', 'txtali']"
					v-for="(item, index) in selectList"
					:key="index"
					@click="activeTwo(index)"
				>
					{{ item.name }}
				</view>
			</view>
		</view>
		<view class="recommend_list" v-for="(item, index) in list" :key="index">
			<view class="flex shop" v-if="type == 3">
				<image class="shopPic" :src="item.shop.avatar"></image>
				<view class="shopname">{{ item.shop.shopname }}</view>
			</view>
			<view class="top_box flexjus">
				<view class="flex">
					<view class="avatar_box">
						<image class="w100 h100" :src="item.avatar"></image>
					</view>
					<view class="name_identity_box">
						<view class="name_txt s32 family f500">
							{{ item.nickname }}
						</view>
						<view class="mobile">
							<text>{{ item.mobile }}</text>
							<image src="../schedule/static/13.png" class="tel"></image>
						</view>
					</view>
				</view>
				<view class="right_detail_box flex" @click="goList(item)">
					<view class="detail_txt s24 family f500">查看详情</view>
					<view class="left_icon"></view>
				</view>
			</view>
			<view class="bottom_box flexjus">
				<view class="bot_left_box s28 family f500">推荐订单(个) : {{ item.order_number }}</view>
				<view class="bot_left_box s28 family f500">获得奖励金额(元) : {{ item.rebate }}</view>
			</view>
		</view>
		<view class="s32 familytow fblod txtali" style="margin: 60% auto" v-if="list.length == 0">暂无数据！</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: '',
			image: '/static/tab_jian.png',
			color: 'black',
			showPicker: true,
			background: '#ffffff',
			startDate: '',
			endDate: '',
			list: [],
			listTj: [
				{
					name: '推荐量'
				},
				{
					name: '奖励金额'
				}
			],
			listTjIndex: 0,
			selectList: [
				{
					name: '月度'
				},
				{
					name: '季度'
				},
				{
					name: '年度'
				}
			],
			selectIndex: 0,
			year: 0,
			month: 0,
			date: 0,
			type: 0,
			id: 0,
			nianyueri: -1,
			keyword: '',
			fenleiType: '',
			fenleiBoolon: false,
			shopList: [],
			index: 0
		};
	},
	onLoad(options) {
		let obj = JSON.parse(options.obj);
		this.type = options.type;
		this.id = obj.shopId;
		this.index = obj.index;
		this.getDate();
		this.getData();
		this.getShopList();
	},
	methods: {
		getDate() {
			let myDate = new Date();
			this.year = myDate.getFullYear();
			this.month = myDate.getMonth() + 1;
			this.date = myDate.getDate();
		},
		screen() {
			this.getData();
		},
		getData() {
			let that = this;
			this.$request({
				url: 'manage/user_data',
				method: 'POST',
				data: {
					keyword: that.keyword,
					level: that.type,
					shop_id: that.id,
					start: that.startDate,
					end: that.endDate,
					type: that.nianyueri,
					sort: that.fenleiType,
					order: that.fenleiBoolon ? 'desc' : 'asc'
				}
			}).then((res) => {
				if (res.data.code == 1) {
					that.list = res.data.data;
				}
			});
		},
		active(ind) {
			uni.requestSubscribeMessage({
				tmplIds: ['36731'],
				success(res) {}
			});
			if (this.listTjIndex == ind) {
				this.fenleiBoolon = !this.fenleiBoolon;
			} else {
				this.fenleiBoolon = false;
			}
			this.listTjIndex = ind;
			if (this.listTjIndex == 0) {
				this.fenleiType = 'order_number';
			} else {
				this.fenleiType = 'money';
			}

			this.getData();
		},
		activeTwo(ind) {
			this.selectIndex = ind;
			if (ind == 0) {
				this.nianyueri = 1;
			} else if (ind == 1) {
				this.nianyueri = 2;
			} else if (ind == 2) {
				this.nianyueri = 3;
			}
			this.getData();
		},
		goList(item) {
			let itemData = JSON.stringify(item);
			uni.navigateTo({
				url: '/pages/bulletinBoard/rewardDeatil?item=' + encodeURIComponent(itemData) + '&level=' + this.type + '&shopId=' + this.id
			});
		},
		change(e) {
			this.startDate = e;
		},
		change1(e) {
			this.endDate = e;
		},
		//获取店铺列表
		getShopList() {
			this.$request({
				url: 'wedding/shop_list',
				method: 'POST',
				data: {
					keyword: '',
					type: 1
				}
			}).then((res) => {
				this.shopList = res.data.data;
			});
		},
		// 选择店铺
		onPicker(e) {
			this.id = this.shopList[e].id;
			this.index = e;
			this.getData();
		}
	}
};
</script>

<style scoped lang="scss">
.box {
	overflow: hidden;
	padding-bottom: 50upx;
	.recommend_list {
		width: 750upx;
		background: #ffffff;
		padding: 32upx 32upx 32upx 32upx;
		box-sizing: border-box;
		margin-top: 26upx;
		.shop {
			padding-bottom: 24rpx;
			.shopPic {
				width: 32rpx;
				height: 32rpx;
				border-radius: 50%;
			}
			.shopname {
				padding-left: 8rpx;
				font-size: 24rpx;
				color: #999;
				line-height: 34rpx;
			}
		}
		.bottom_box {
			margin-top: 24upx;

			.bot_left_box {
				color: #666666;
			}
		}

		.top_box {
			padding-bottom: 24upx;
			border-bottom: 2upx solid #efefef;

			.avatar_box {
				width: 96upx;
				height: 96upx;
				background-color: #666666;
				border-radius: 50%;
				flex-shrink: 0;
				overflow: hidden;
			}

			.name_identity_box {
				margin-left: 18upx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.name_txt {
					line-height: 44rpx;
					color: #000;
				}

				.mobile {
					line-height: 36rpx;
					font-size: 26rpx;
					color: #999;
				}

				.tel {
					width: 36rpx;
					height: 36rpx;
					margin-left: 8rpx;
					vertical-align: middle;
				}

				.identity_box {
					border-radius: 6upx;
					border: 1upx solid #999999;
					padding: 6upx;
					color: #999;
					margin-top: 6upx;
					margin-right: 16upx;
				}

				.flex-wwrap {
					flex-wrap: wrap;
				}
			}

			.right_detail_box {
				margin-top: 36upx;

				flex-shrink: 0;

				.detail_txt {
					color: #ebbe87;
					margin-right: 16upx;
				}

				.left_icon {
					width: 16upx;
					height: 36upx;
					background-image: url('');
					background-size: 100% 100%;
				}
			}
		}
	}

	.select_box {
		padding-left: 32upx;
		padding-right: 68upx;
		margin-top: 28upx;

		.right_box {
			.list_box {
				width: 60upx;
				height: 36upx;
				background: #666666;
				border-radius: 6upx;
				color: #ffffff;
				line-height: 36upx;
				margin-right: 42upx;
			}

			.list_box_active {
				width: 60upx;
				height: 36upx;
				background: #f4f5f9;
				border-radius: 6upx;
				color: #666666;
				line-height: 36upx;
				margin-right: 42upx;
			}

			.list_box_active:last-child {
				margin-right: 0;
			}

			.list_box:last-child {
				margin-right: 0;
			}
		}

		.left_box {
			align-items: center;
			margin-right: 78upx;

			.tjl_icon {
				width: 22upx;
				height: 22upx;
				background-image: url('');
				background-size: 100% 100%;
			}

			.tjl_icon_active {
				width: 22upx;
				height: 22upx;
				background-image: url('');
				background-size: 100% 100%;
			}

			.tjl_txt {
				color: #666666;
				margin-left: 6upx;
			}

			.tjl_txt_active {
				color: #000000;
				margin-left: 6upx;
			}
		}
	}

	.tab_nav {
		background-color: #ffffff;
	}

	.header_share {
		height: 94upx;
		background: #ffffff;
		overflow: hidden;

		.uni_ipt {
			width: 460upx;
			height: 68upx;
			background: #f3f3f3;
			border-radius: 8upx 8upx 8upx 8upx;
			margin-left: 32upx;
			margin-top: 12upx;
			padding-left: 78upx;
		}

		.search_img {
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			left: 50rpx;
			margin-top: 28rpx;
		}

		.search_btn {
			width: 116upx;
			height: 68upx;
			background: #e0a76d;
			border-radius: 34upx 34upx 34upx 34upx;
			line-height: 68upx;
			color: #ffffff;
			margin-top: 10upx;
			margin-left: 32upx;
		}
	}

	.head_riqi_box {
		height: 94upx;
		background: #ffffff;

		/deep/ .uni-date {
			width: 290upx;
			height: 50upx;
			background: #f3f3f3;
			border-radius: 58upx 58upx 58upx 58upx;
		}

		/deep/ .uni-date-x--border {
			border: none !important;
		}

		/deep/ .uni-date-x {
			margin-top: 6upx;
		}

		.zhi_txt {
			color: #999999;
			line-height: 94upx;
		}

		.shaixuan_btn {
			width: 104upx;
			height: 50upx;
			background: #666666;
			border-radius: 25upx 25upx 25upx 25upx;
			line-height: 50upx;
			color: #ffffff;
			margin-top: 18upx;
			margin-left: 6upx;
		}
	}
}
</style>
<style>
page {
	background-color: #f4f5f9;
}
</style>
